<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>HelloWorld</title>
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/im.css" />
		<script src="../js/jquery.min.js"></script>
		<script type="text/javascript" src="../layui/layui.js"></script>
		<script type="text/javascript" src="../js/template.js"></script>
		<script type="text/javascript" src="../js/im.js"></script>
	</head>

	<body>
		<div id="im-view" class="im-view layui-row">
			<div class="im-view-title layui-col-xs12">
				<div class="layui-col-xs1 im-view-title-left" align="center">
					<img style="width: 50px;height: 50px;border-radius: 10%; margin-top: 5px;z-index: 3;" src="../img/1.jpg" />
				</div>
				<div class="layui-col-xs4 im-view-title-center" style="padding: 10px;">
					<input style="position:relative; z-index: 3;border-radius: 5px; width: 100%;height:20px;top: 50%;margin-top: -10px;" type="search" />
				</div>
				<div class="layui-col-xs7 im-view-title-right row">
					<div class="layui-col-xs10" style="position: relative; top: 21px;margin-left: 20px;">
						<h3 id="msg_title">&nbsp;</h3>
					</div>
					<div class="layui-col-xs1" style="position: relative;top: 50%;" align="center"><i class="layui-icon" style="font-size: 1.5rem;">&#xe65f;</i></div>
				</div>
			</div>
			<div class="layui-col-xs1 im-view-left layui-row">
				<div class="layui-col-xs10 layui-col-xs-offset1">
					<i class="layui-icon" style="color: #F0F0F0; font-size: 40px">&#xe63a;</i>
					<i class="layui-icon" style="color: #F0F0F0; font-size: 40px">&#xe66f;</i>
				</div>
			</div>
			<div class="layui-col-xs4 im-view-center">
				<ul id="userList">
					<!--<li class="user">
						<img src="../img/2.jpg" />
						<span>萱萱</span>
					</li>-->
				</ul>
			</div>
			<div class="layui-col-xs7 im-view-right">
				<div style="height: 70%;overflow-y: scroll;">
					<ul id="im-record" class="im-record">
					</ul>
				</div>
				<div class="im-view-sendtext">
					<textarea id="im-sendMsgText" placeholder="按下Ctrl+Enter键发送" class="layui-textarea"></textarea>
					<div style="background-color: #fff;width: 100%;height: 30%;">
						<button id="im-btn-send" send-user="" class="layui-btn layui-btn-sm layui-btn-xs" type="button">发送(s)</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 下面为arttemplate 模板语言 -->
		<script id="im-record-send" type="text/html">
			<li>
				<p class="im-record-time">
					<span>{{time}}</span>
				</p>
				<div class="im-record-main self">
					<img class="avatar" src="../img/1.jpg">
					<div class="send-uname">pual</div>
					<div class="text">
						{{msg}}
					</div>
				</div>
			</li>
		</script>
		<script id="im-record-push" type="text/html">
			<li>
				<p class="im-record-time">
					<span>{{time}}</span>
				</p>
				<div class="im-record-main">
					<img class="avatar" src="../img/{{img}}">
					<div class="send-uname">{{name}}</div>
					<div class="text">
						{{msg}}
					</div>
				</div>
			</li>
		</script>
		<script id="im-users" type="text/html">
			 {{each users as user index}}
				<li class="user" username={{user.username}}>
					<img src="../img/{{user.img}}" />
					<span>{{user.name}}</span>
				</li>
			{{/each}}
		</script>
	</body>

</html>